/**
 * 
 */
<template>
  <div style="height: 100%">
    <div id="qmviewer_container" style="width: 50%; height: 100%; float: left">
      <qmviewer
        v-bind:modelName="modelName"
        v-bind:isCompont="isCompont"
        @callFather_loaded="callFather_loaded"
      ></qmviewer>
    </div>
    <div
      id="qmviewer_container2"
      style="margin-left: 50%; width: 50%; height: 100%"
    >
      <qmviewer
        v-bind:modelName="modelName2"
        v-bind:isCompont="isCompont"
        v-bind:isSecond="true"
        @callFather_loaded="callFather_loaded2"
      ></qmviewer>
    </div>
    <transition class="move_root" style="display: none">
      <div class="moveBox" :style="position" v-show="show">
        <div
          class="moveHead"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseup="mouseup"
          @mouseleave="mousemove"
        >
          {{ title }}
        </div>

        <div class="close" @click="toggleShow()">X</div>
        <div class="content">
          <slot>
            <div style="height: 60vh; overflow: hidden">
              <ul ref="divlist" style="height: 100%; overflow: auto"></ul>
            </div>
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import qmviewer from "../../components/qmviewer";
import "../../css/lable.css";
import Mx from "mxdraw";
export default {
  name: "DemoCompare",
  data() {
    return {
      viewerDemo: null,
      //你需要打开的模型名称放这里，模型文件是放在 这个目录"/static/localmodel/" ，您需要的文件先上传到官网，然后联系我们拷出来。
      modelName: "rac_basic_sample_project_v1.rvt",
      //  modelName2: "路灯、摄像机合设.rvt",
      modelName2: "rac_basic_sample_project.rvt",
      isCompont: true,
      //移动窗体的属性
      title: "常规示例操作",
      show: true, //是否显示
      x: 300, //left:x
      y: 60, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
      //标签
      domMap: new Map(),
      qmodel_container: null,
    };
  },
  // 注册组件
  components: {
    qmviewer,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  beforeCreate() {},
  created() {
    //console.log(this._data);
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 模型加载完成事件
    callFather_loaded(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container");
      _this.qcontrol = parm;
      console.log("组件Demo", parm);

      //ddebugg
      // _this.qmodel
      //   .get_model_allversion("rac_basic_sample_project.rvt")
      //   .then((e) => {
      //     console.log(e);
      //   });
      var params = qmodel.get_option();
      params.opModelSelect = false;
      params.opTree = false;
      params.showTree = false;
      params.opRectSelect = false; //显示工具栏的框选
      params.opMeasure = false; //显示工具栏的测量
      params.opClip = false; //显示工具栏的剖切
      params.opWalk = false; //显示工具栏的漫游
      params.opMap = false; //显示工具栏的小地图,有点问题，暂时屏蔽
      params.opMark = false; //显示工具栏的标记
      params.opMark2D = false; //显示工具栏的2D标记
      params.opMark3D = false; //显示工具栏的3D标记
      qmodel.viewerDemo.resetDOM(params);
      //选中联动。
      qmodel.set_select_callback(function (id) {
        var cmps = JSON.parse(id);
        qmodel2.set_comps_selected([
          cmps.cmpid.substr(cmps.cmpid.indexOf("^") + 1),
        ]);
        console.log(cmps);
      });
      //窗口联动。用A窗口来控制B窗口。
      qmodel.set_camera_change_callback((a) => {
        qmodel2.set_camera(a.position, a.target);
      });
      //初始化模型对比列表。对比序列id=2.如何发起模型对比，详见官网的说明文档。
      qmodel.globalNet
        .httpGet("/get-compare-result?logId=2&page=0&size=100")
        .then((list) => {
          var parentdiv = _this.$refs["divlist"];
          var cmap = qmodel.get_category_map();

          parentdiv.innerHTML = "";
          list.sort((a, b) => {
            if (a.cmpResult != b.cmpResult) return b.cmpResult - a.cmpResult;
            else return a.cid - b.cid;
          });
          list.forEach((e) => {
            var li1 = document.createElement("li");

            var a2 = document.createElement("a");
            a2.style.color =
              e.cmpResult == "3"
                ? "#ff0000"
                : e.cmpResult == "1"
                ? "#0000ff"
                : "#00ff00";

            li1.appendChild(a2);
            a2.innerText = cmap.get(e.cid);
            a2.data = e;
            a2.onclick = function (ev) {
              var ed = ev.target.data;
              if (ed.uniqueId1) {
                qmodel.lookat_comp(ed.docId + "^" + ed.uniqueId1);
                if (ed.uniqueId2)
                  qmodel2.set_comps_selected([ed.docId + "^" + ed.uniqueId2]);
              } else qmodel2.lookat_comp(ed.docId + "^" + ed.uniqueId2);
            };
            //a2.setAttribute("onclick", 'translateModel("' + e.id + '")');
            parentdiv.appendChild(li1);
          });
        });
    },
    callFather_loaded2(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container2");
      _this.qcontrol2 = parm;
      console.log("组件Demo", parm);
      var params = qmodel2.get_option();
      params.opModelSelect = false;
      params.opTree = false;
      params.showTree = false;
      params.opToolbar = false;
      params.showPty = true;
      qmodel2.viewerDemo.resetDOM(params);

      // qmodel.set_select_callback(function (id) {
      //   var cmps = JSON.parse(id);
      //   console.log(cmps);
      // });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {},
    //控制打开关闭
    toggleShow(data) {
      this.x = 100;
      this.y = 50;

      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style scoped>
.moveBox {
  width: 220px;
  position: fixed;
  z-index: 99998;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 5px 3px #95a5a6;
}
.moveBox .moveHead {
  height: 35px;
  background-color: rgb(51, 65, 87);
  cursor: move;
  color: #fff;
  padding: 9px 0 0 11px;
}
.moveBox .close {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>


 
 